.farris-star-rating {
    cursor: pointer;
}

.farris-star-rating {
    display: flex;
    position: relative;
}

.farris-star-rating .default-light-color {
    color: #FBDB10;
}

.farris-star-rating .default-dark-color {
    color: #E8E8E8;
}

.star-light-area span,
.star-dark-area span {
    box-sizing: content-box;
    padding-right: 4px;
}

.farris-star-rating .f-star-sm {
    font-size: 14px;
}

.farris-star-rating .f-star-md {
    font-size: 16px;
}

.farris-star-rating .f-star-lg {
    font-size: 18px;
}

.farris-star-rating .f-star-exlarge {
    font-size: 24px;
}

.farris-star-rating .star-dark-area {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

/* .farris-star-rating .small {
    width: 90px;
}

.farris-star-rating .middle {
    width: 100px;
}

.farris-star-rating .large {
    width: 110px;
} */

.farris-star-rating .f-utils-fill {
    padding-left: 2px;
    font-size: 14px;
}

.farris-star-rating .font-small {
    line-height: 14px;
}

.farris-star-rating .font-middle {
    line-height: 16px;
}

.farris-star-rating .font-large {
    line-height: 18px;
}

.farris-star-rating .font-exlarge {
    line-height: 24px;
}


.farris-star-rating .star-light-area {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 0%;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

.farris-star-rating .star-light-area span,
.farris-star-rating .star-dark-area span {
    flex-shrink: 0;
}